<template>
  <div class="panel-tab__content">
    <el-form size="mini" label-width="80px" @submit.native.prevent>
      <el-form-item label="按钮权限">
        <el-select multiple v-model="form.btn_auth_arr" @change="updateElement">
          <el-option label="退回按钮" value="1" />
          <el-option label="转办按钮" value="2" />
          <el-option label="加签按钮" value="3" />
          <el-option label="强制结束按钮" value="4" />
          <el-option label="转阅按钮" value="5" />
          <el-option label="打印按钮" value="6" />
          <el-option label="撤办按钮（下一节点）" value="7" />
          <el-option label="收回按钮（任何节点）" value="8" />
        </el-select>
      </el-form-item>
      <el-form-item label="审批跳过">
        <el-select v-model="form.skip_same_approve" @change="updateElement">
          <el-option label="不跳过同审批人" value="1" />
          <el-option label="跳过同审批人" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="节点类型">
        <el-select v-model="form.node_type" @change="updateElement">
          <el-option label="普通任务" value="1" />
          <el-option label="自动任务" value="2" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="待阅设置">
        <el-select v-model="form.open_read" @change="updateElement">
          <el-option label="开启待阅" value="1" />
          <el-option label="关闭待阅" value="2" />
        </el-select>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { settingInfo, save } from "@/api/activiti/nodesetting";
export default {
  name: "ElementOtherConfig",
  props: {
    id: String,
  },
  data() {
    return {
      form: {
        id:"",
        process_id: "",
        node_id: "",
        node_name: "",
        btn_auth: "",
        skip_same_approve: "1",
        node_type:"1",
        open_read: "",
        btn_auth_arr:[]
      },
      elementType: "",
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetFormList());
      },
    },
  },
  methods: {
    resetFormList() {
      this.bpmnELement = window.bpmnInstances.bpmnElement;
      console.log(this.bpmnELement);
      this.elementType = this.bpmnELement.type.split(":")[1];
      this.form.node_id = this.bpmnELement.id;
      this.form.process_id = this.bpmnELement.parent.id;
      if (this.bpmnELement.businessObject.name != undefined) {
        this.form.node_name = this.bpmnELement.businessObject.name;
      }

      settingInfo({ process_id: this.form.process_id, node_id: this.form.node_id }).then(
        (response) => {
          let data = response.data.data;
          if (data != null) {
            this.form.id = data.id;
            this.form.btn_auth = data.btn_auth;
            this.form.skip_same_approve = data.skip_same_approve;
            this.form.node_type = data.node_type;
            this.form.open_read = data.open_read;
            this.form.btn_auth_arr = data.btn_auth.split(',');
            console.log(this.form)
          }else{
            this.form.id = "";
            this.form.btn_auth = "";
            this.form.skip_same_approve = "1";
            this.form.node_type = "1";
            this.form.open_read = "";
            this.form.btn_auth_arr = [];
          }
        }
      );
    },
    updateElement() {
      this.form.btn_auth = this.form.btn_auth_arr.join(',');
      save(this.form).then(
        (response) => {
          let data = response.data.data;
          this.form.id = data.id;
        }
      );
    },
  },
  beforeDestroy() {
    this.bpmnElement = null;
  },
};
</script>
